<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李猪文</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #000;
        }
        #box {
            width: 100%;
            height:650px;
            background-color: #000;
            box-shadow: 0 0 10px 0 #000;
            margin: auto;
            overflow: hidden;
            position: relative;
            margin-top: 50px;
        }

        #box div {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="cir"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        var box = document.getElementById("box");
var cir = document.getElementById("cir")
var cirs = box.querySelectorAll("div");
collMove(box, cir, 6);
collMove(box, cirs[1], 7);
collMove(box, cirs[2], 8);
collMove(box, cirs[3], 9);
collMove(box, cirs[4], 10);
collMove(box, cirs[5], 10);
collMove(box, cirs[6], 11);
collMove(box, cirs[7], 12);
collMove(box, cirs[8], 13);
collMove(box, cirs[9], 14);
collMove(box, cirs[10], 15);
collMove(box, cirs[11], 16);
collMove(box, cirs[12], 17);
collMove(box, cirs[13], 18);
collMove(box, cirs[14], 19);
collMove(box, cirs[15], 20);
collMove(box, cirs[16], 21);
collMove(box, cirs[17], 22);
collMove(box, cirs[18], 23);
collMove(box, cirs[19], 24);
collMove(box, cirs[20], 25);
collMove(box, cirs[21], 26);
collMove(box, cirs[22], 27);
collMove(box, cirs[23], 28);
collMove(box, cirs[24], 29);
collMove(box, cirs[25], 30);
collMove(box, cirs[26], 31);
collMove(box, cirs[27], 32);
collMove(box, cirs[28], 33);
collMove(box, cirs[29], 34);
collMove(box, cirs[30], 35);
collMove(box, cirs[31], 36);
collMove(box, cirs[32], 37);
collMove(box, cirs[33], 38);
collMove(box, cirs[34], 39);
collMove(box, cirs[35], 40);
collMove(box, cirs[36], 41);
collMove(box, cirs[37], 42);
collMove(box, cirs[38], 43);
collMove(box, cirs[39], 44);
collMove(box, cirs[40], 45);
collMove(box, cirs[41], 46);
collMove(box, cirs[42], 47);
collMove(box, cirs[43], 48);
collMove(box, cirs[44], 49);
collMove(box, cirs[45], 50);
collMove(box, cirs[46], 51);
collMove(box, cirs[47], 52);
collMove(box, cirs[48], 53);
collMove(box, cirs[49], 54);
collMove(box, cirs[50], 55);
collMove(box, cirs[51], 56);
collMove(box, cirs[52], 57);
collMove(box, cirs[53], 58);
collMove(box, cirs[54], 59);
collMove(box, cirs[55], 60);
collMove(box, cirs[56], 61);
/**
 * 元素遇边界弹开
 * 弹开的同时改变元素颜色
 * @param {容器获取} box 
 * @param {容器内弹跳元素获取} cir 
 * @param {弹跳速度} speed 
 */
function collMove(box, cir, speed) {//方法封装
    var oDiv = box; //获取容器
    var oCir = cir; //获取容器内元素
    var xMax = oDiv.offsetWidth - oCir.offsetWidth; //容器最大X轴边界
    var yMax = oDiv.offsetHeight - oCir.offsetHeight; //容器最大Y轴边界
    var motionX = 0; //元素X轴坐标初始化
    var motionY = 0; //元素y轴坐标初始化
    (() => {
        var speedX = speed; //x轴偏移量
        var speedY = speed; //y轴偏移量
        setInterval(() => {
            motionX += speedX; //进行X轴偏移
            motionY += speedY; //进行y轴偏移
            if (motionX >= xMax) { //检测是否碰到X轴右边界
                motionX = xMax; //碰到边界将X轴坐标设为x轴最大右边界
                speedX = -speedX; //x轴偏移量反转
                randColor(oCir); //改变颜色
            } else if (motionX <= 0) { //检测是否碰到X左边界
                motionX = 0; //碰到边界将X轴坐标设为 0 即左边界初始位置
                speedX = -speedX; //再次反转X轴偏移量
                randColor(oCir); //下方上下边界检测同理
            }
            if (motionY >= yMax) {
                motionY = yMax;
                speedY = -speedY
                randColor(oCir);
            } else if (motionY <= 0) {
                motionY = 0;
                speedY = -speedY;
                randColor(oCir);
            }
            oCir.style.marginLeft = motionX + "px"; //设置元素X轴坐标
            oCir.style.marginTop = motionY + "px"; //设置元素Y轴坐标
        }, 10);
    })();

    function randColor(obj) { //封装一个随机色彩，改变颜色直接调用
        var op = Math.random() * 7 + 3;

        function color() {
            return Math.floor(Math.random() * 256);
        }
        return obj.style.backgroundColor = `rgba(${color()},${color()},${color()},${op})`;
    }
}

    </script>
</body>
</html>